<template>
	<view class="patrol_style" scroll-y="false">
		<header-nav navbar-title="通知通告" :showBack="true"></header-nav>
		<!-- <view :style="{ top: statusBarHeight }" class="dropdown_top">
			<zb-dropdown-menu style="width: 33.33%">
				<zb-dropdown-item name="类型" :options="option" v-model="fication" @change="ficationChange"></zb-dropdown-item>
			</zb-dropdown-menu>
			<zb-dropdown-menu style="width: 33.33%">
				<zb-dropdown-item name="全部" :options="option" v-model="fication" @change="ficationChange"></zb-dropdown-item>
			</zb-dropdown-menu>
			<view v-if="!patrol" @click="patrolChange" class="dropdown_text">发布时间</view>
			<view @click="patrolChange" v-else class="dropdown_left">
				<view>发布时间</view>
				<view>{{ patrol }}</view>
			</view>
		</view> -->

		<view :style="{ top: statusBarHeight }" class="dropdown_top">
			<u-search placeholder="请输入" v-model="keyword" :animation="false" :showAction="false" @blur="onBlurSearch" @clear="onClearBtnOK"></u-search>
		</view>

		<view style="margin-top: 118rpx">
			<!-- <scroll-view @scrolltolower="loadMoreData" scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox"> -->
			<view @click="contentBtnok(item)" class="content_scroll" v-for="(item, index) in isNoticeData" :key="index">
				<view class="content_top">
					<view>
						<image style="width: 260rpx; height: 260rpx" src="../../static/mappages/patrol/xc.png" mode=""></image>
					</view>
					<view class="contentLeft_text">
						<view class="contentLeft_flex">
							<text class="ellipsis">{{ item.noticeTitle }}</text>
							<text class="ellipsisDate">{{ item.updateTime }}</text>
						</view>
						<view>
							<text style="color: #9b9b9b; font-size: 22rpx">{{ item.noticeContent }}</text>
						</view>
					</view>
				</view>
			</view>
			<u-loading-icon style="margin-top: 50rpx" v-if="noticeInfo.isBoolean"></u-loading-icon>
			<uni-load-more v-if="!noticeInfo.isBoolean" status="暂无更多" />
			<!-- </scroll-view> -->
		</view>

		<!-- 巡查时间 -->
		<u-calendar :show="patrolShow" :mode="patrolMode" @close="patrolShow = false" @confirm="patrolConfirm"></u-calendar>
	</view>
</template>

<script>
import { getNoticeInfo } from '@/api/mappages/notice/notice.js';
export default {
	components: {},
	data() {
		return {
			keyword: '',
			statusBarHeight: '',
			albumWidth: 0,
			urls1: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg'],
			patrolShow: false,
			patrolMode: 'range',
			patrol: '', //巡查时间
			fication: 4, //整改状态
			option1: [
				{
					text: '选择时间',
					value: 0
				}
			],
			option: [
				{
					text: '交办中',
					value: 0
				},
				{
					text: '已登记',
					value: 1
				},
				{
					text: '已整改',
					value: 2
				},
				{
					text: '已退回',
					value: 3
				},
				{
					text: '整改状态',
					value: 4
				}
			],
			isNoticeData: [],
			noticeInfo: {
				page: 1,
				size: 10,
				isBoolean: true
			}
		};
	},
	created() {
		// console.log(this.$db.get('menuInfo'));
		this.statusBarHeight = this.$db.get('menuInfo').contentTop;

		let arr = this.$store.state.user.name;
		console.log(arr, 'arr');
	},
	mounted() {
		this.isNoticeFow();
	},
	methods: {
		isNoticeFow() {
			let brr = {
				name: this.$store.state.user.name,
				keyWord: this.keyword,
				page: this.noticeInfo.page,
				size: this.noticeInfo.size,
				pubStatusCode: 1
			};
			getNoticeInfo(brr).then((res) => {
				if (!res.result) return (this.noticeInfo.isBoolean = false);
				if (this.noticeInfo.page > 1 && res.result.total >= this.noticeInfo.size) {
					const previousData = [...this.isNoticeData];
					this.isNoticeData = [...previousData, ...res.result.records];
				} else {
					this.noticeInfo.isBoolean = true;
					this.isNoticeData = res.result.records;
				}

				if (res.result.total === this.isNoticeData.length) {
					this.noticeInfo.isBoolean = false;
				}
			});
		},
		// // 触底刷新事件
		// loadMoreData() {
		// 	let arr = this.$store.state.name;
		// 	console.log(arr, 'arr');
		// },
		patrolChange() {
			this.patrol = '';
			this.patrolShow = true;
		},
		//整改状态
		ficationChange() {
			// this.patrolShow = true;
		},
		patrolConfirm(e) {
			this.patrol = e[0] + '-' + e[e.length - 1];
			this.patrolShow = false;
		},
		onBlurSearch() {
			this.isNoticeData = [];
			this.noticeInfo = {
				page: 1,
				size: 10,
				isBoolean: true
			};
			this.isNoticeFow();
		},
		onClearBtnOK() {
			this.isNoticeData = [];
			this.noticeInfo = {
				page: 1,
				size: 10,
				isBoolean: true
			};
			this.isNoticeFow();
		},
		//河道巡查 点击事件
		contentBtnok(item) {
			const itemStr = encodeURIComponent(JSON.stringify(item));
			this.$tab.navigateTo(`/mappages/notice/details/details?item=${itemStr}`);
		}
	},
	onLoad(options) {
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
	},
	onReachBottom() {
		this.noticeInfo.page += 1;
		!this.noticeInfo.isBoolean ? '' : this.isNoticeFow();
		console.log(111);
	},
	onPullDownRefresh() {
		console.log('下拉刷新');
		// setTimeout(function () {
		// 	uni.stopPullDownRefresh();
		// }, 1000);
	}
};
</script>

<style scoped>
.example-body {
	padding: 12px;
	background-color: #ffffff;
}

.result-box {
	text-align: center;
	padding: 20px 0px;
	font-size: 16px;
}

.patrol_style {
	width: 100%;
	overflow-y: hidden;
}

.dropdown_top {
	display: flex;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: 20rpx;
	background: #fff;
}

.dropdown_text {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 33.3%;
	box-shadow: 2rpx 2rpx 5rpx rgba(190, 190, 190, 0.5), -2rpx -2rpx 5rpx rgba(255, 255, 255, 0.5);
	z-index: 100;
	font-size: 26rpx;
	color: #323233;
	background-color: #fff;
}

.dropdown_left {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-around;
	width: 33.3%;
	box-shadow: 2rpx 2rpx 5rpx rgba(190, 190, 190, 0.5), -2rpx -2rpx 5rpx rgba(255, 255, 255, 0.5);
	z-index: 100;
	background-color: #fff;
}

.dropdown_left view:nth-child(1) {
	font-weight: 600;
	font-size: 26rpx;
	color: #323233;
}

.dropdown_left view:nth-child(2) {
	font-size: 22rpx;
}

.content_scroll {
	margin-top: 20rpx;
	width: 100%;
	background-color: #fff;
	padding: 10rpx;
}

.content_top {
	display: flex;
	justify-content: space-between;
}

.contentLeft_text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-around;
	margin-left: 10rpx;
	width: calc(100% - 260rpx);
}

.contentLeft_flex {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.contentLeft_flex text:nth-child(2) {
	color: #c9c9c9;
}

.ellipsis {
	display: block; /* 确保 text 标签作为块级元素 */
	min-width: 40%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #000;
}

.ellipsisDate {
	min-width: 40%;
	text-align: right;
	font-size: 24rpx;
}

.album {
	@include flex;
	align-items: flex-start;

	&__avatar {
		background-color: $u-bg-color;
		padding: 5px;
		border-radius: 3px;
	}

	&__content {
		margin-left: 10px;
		flex: 1;
	}
}

.topSearch {
	margin-top: 10rpx;
	padding: 10rpx;
	background-color: #fff;
}
</style>
